<template>
  <div class="all">
    <header>
      <div class="div">
        <img @click="back" src="../../assets/返回.png" alt="">
        <span @click="back" class="blueText">返回</span>
      </div>
      <div class="div">
        <span >评定管理</span>
      </div>
      <div class="div">
        <span class="blueText"></span>
      </div>
    </header>
    <div class="tab">
      <div class="tabTitle">
        {{arr.ASSESS_NAME}}
      </div>
      <div class="tabPerson">
        <p class="tabName">
          <span>姓名：{{peopleList.name}}</span>
          <span>性别：
              <a v-if="peopleList.sex == 1">男</a>
              <a v-else-if="peopleList.sex == 2">女</a>
          </span>
          <span>年龄：{{peopleList.age}}</span>
        </p>
        <p>联系电话：{{peopleList.phone}}</p>
        <p>初步诊断：{{arr.DIAGNOSE}}</p>
        <p>联系地址：{{peopleList.zuizhongAddress}}</p>
        <p>评定总分：{{arr.zongFen}}分</p>
        <p>评定来源：{{assessTypeName}}</p>
        <p>评定日期：{{arr.CREATED_AT}}</p>
        <p>评定结果：</p>
        <div class="tabTextarea">
          <textarea name="" v-model="arr.result" readonly id="" cols="30" rows="10"></textarea>
        </div>
        <p>评定人员： {{arr.ASSESS_USER_NAME}}</p>
      </div>
      <div v-show="images.length > 0" class="label" style="justify-content: space-between;margin-top: 5px;margin-bottom: 5px"
           >
        <span style="display: flex;align-items: center" >
          <a class="hengGang"></a>评定人签名
        </span>
<!--        <img style="width: 100px;height: 30px;object-fit: contain" :src="arr.SIGN_URL" alt="">-->
      </div>
      <div v-show="images.length > 0" @click="images.length > 0 ? show = true : show = false" style="width: 95%;height: 70px;margin: 0 auto;border: 1px solid #999;overflow:hidden;border-radius:10px;">
        <img style="width: 100%;height: 100%;object-fit: contain;background: #FFFFFF" :src="arr.SIGN_URL" alt="">
      </div>
      <div class="label" style="margin-top: 5px;margin-bottom: 5px">
        <a class="hengGang"></a>评定项目及评定项目结果
      </div>
      <div class="tabContent">
        <ul v-for="(item, index) in arr.subjects" :key="index">
          <li class="liHeader">
            <p>{{index+1}}、{{item.SUBJECT_NAME}}</p>
            <p class="p_btn">
            </p>
          </li>
          <li class="liChoos"
              v-for="(chooseItem, chooseIndex) in item.chooses"
              :key="chooseIndex"
          >
            <img
              class="selectBtn" :src="[chooseItem.select === true ? require('../../assets/题目选择.png') : require('../../assets/题目未选择.png')]"
              alt="">
            {{chooseItem.CHOOSE_NAME}} ({{chooseItem.POINTS}}分)
          </li>
        </ul>
      </div>
    </div>
    <van-image-preview v-model="show" :images="images" >
<!--      <template v-slot:index>第{{ index }}页</template>-->
    </van-image-preview>
  </div>
</template>

<script>
export default {
  name: 'PingGuDetails',
  data () {
    return {
      arr: [],
      show: false,
      images: []
    }
  },
  computed: {
    peopleList: function () {
      return JSON.parse(sessionStorage.getItem('PatientInformation'))
    },
    assessTypeName: function () {
      if (this.arr.ASSESS_TYPE == 1) {
        return '门诊'
      } else if (this.arr.ASSESS_TYPE == 2) {
        return '住院'
      } else if (this.arr.ASSESS_TYPE == 3) {
        return '居家'
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取
    getList () {
      this.$http.getMyAssessAndAnswers({ID: this.$route.query.ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.arr = res.data.data[0]
            if (this.arr.SIGN_URL !== null && this.arr.SIGN_URL !== undefined && this.arr.SIGN_URL !== '') {
              this.images.push(this.arr.SIGN_URL)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    font-family: "PingFang SC";
    background: #FAF9FE;
    overflow: auto;
  }
  header{
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #E5E5E5;
  }
  .div{
    height: 100%;
    display: flex;
    align-items: center;
  }
  .div:nth-child(2){
    width: 50%;
    justify-content: center;
  }
  .div:nth-child(1),
  .div:nth-child(3){
    width: 25%;
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
  }
  .blueText{
    color: #1da4f2 !important;
  }
  .tabTitle{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    padding: 0 15px;
    box-sizing: border-box;
    background: #FFFFFF;
  }
  .tabPerson{
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    background: #fff;
  }
  .tabName{
    height: 30px!important;
    font-size: 15px !important;
    font-weight: bold !important;
  }
  .tabTextarea{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
    box-sizing: border-box;
  }
  .tabTextarea textarea{
    width: 95%;
    height: 75px;
    background: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 5px;
    resize: none;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
  }
  .tabPerson p{
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .tabPerson p span{
    margin-right: 20px;
  }
  .tabContent ul
  {
    width: 92%;
    padding: 10px 10px 5px 10px;
    box-sizing: border-box;
    background: #FFFFFF;
    margin: auto auto 5px auto;
    border-radius: 10px;
    /*box-shadow: 0px -2px 30px 0px rgb(0 0 0 / 5%);*/
  }
  .label{
    width: 100%;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    font-size: 15px;
  }
  .hengGang
  {
    width: 2px;
    height: 15px;
    background: #1da4f2;
    margin: 0 5px 0 15px;
    display: block;
  }
  .liHeader p{
    margin-bottom: 8px;
  }
  .selectBtn{
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .liChoos{
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  /deep/ .van-image__img{
    background: #FFFFFF;
  }
</style>
